<template>
  <div>
    <el-tag>切</el-tag>
    <el-checkbox @change="clickToChange()">切</el-checkbox>
    <br/>
      <el-select v-model="qie.zhonglei" :disabled="disable"
                 placeholder="请选择" class="length" size="small">
        <el-option v-for="(item) in option.zhonglei" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <el-input v-model="qie.qieK" v-if="qie.zhonglei === '切坑纸'"
                placeholder="输入成本" size="small" class = "length"></el-input>
    <br/>
    <template v-if="getRole()">
    <el-tag type="warning" class="cost">成本: {{computeCost()}}</el-tag>
    </template>
    </div>
</template>

<script>
export default {
  name: 'Qie',
  props: ['Q', 'x', 'y', 'm', 'confirm'],
  data () {
    return {
      disable: true,
      qie: {
        zhonglei: '',
        qieK: 0
      },
      option: {
        zhonglei: ['切卡纸', '切对裱卡牌', '切单层卡牌', '切成品', '切坑纸']
      }
    }
  },
  methods: {
    computeCost () {
      let q = parseInt(this.Q)
      let m = parseInt(this.m)
      let cost = 0
      let costStr = ''
      switch (this.qie.zhonglei) {
        case '切卡纸':
          cost = 0.015 * q <= 30 ? 30 : 0.015 * q
          costStr = 0.015 * q <= 30 ? `30 (0.015 × ${q}) ≤ 30` : `0.015 × ${q} = ${cost}`
          break
        case '切对裱卡牌':
          cost = 0.006 * q * m <= 60 ? 60 : 0.006 * q * m
          costStr = 0.015 * q * m <= 30 ? `60 (0.015 × ${q} × ${m}) ≤ 30` : `0.006 × ${q} × ${m} = ${cost}`
          break
        case '切单层卡牌':
          cost = 0.004 * q * m <= 40 ? 40 : 0.004 * q * m
          costStr = 0.004 * q * m <= 40 ? `40 (0.004 × ${q} × ${m}) ≤ 40` : `0.004 × ${q} × ${m} = ${cost}`
          break
        case '切成品':
          cost = 0.006 * q * m <= 60 ? 60 : 0.006 * q * m
          costStr = 0.006 * q * m <= 60 ? `60 (0.006 × ${q} × ${m}) ≤ 60` : `0.006 × ${q} × ${m} = ${cost}`
          break
        case '切坑纸':
          costStr = `${this.qie.qieK}`
          break
      }
      return costStr
    },
    clickToFin () {
      if (!this.disable) this.$emit('transferToFather', 'qie', this.qie)
    },
    clickToChange () {
      this.disable = !this.disable
    },
    getRole () {
      return sessionStorage.getItem('roleType') === '1'
    }
  },
  watch: {
    confirm (nV, oV) {
      if (nV !== oV) this.clickToFin()
    }
  }
}
</script>

<style scoped>
.length{
  width: 130px;
  display: inline-block;
  margin-top: 10px;
  margin-right: 10px;
}
.cost {
  margin-top: 10px;
}
</style>
